<template>
	<view>
		<view class="bottom-box">
			<view class="bottom" :style="{color:color,backgroundColor:backgroundColor}" @click="submit">{{title}}</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 底部悬浮按钮组件
	 */
	export default {
		name: "cy-position-button",
		data() {
			return {};
		},
		props:{
			color:{
				type:String,
				default: "#FFFFFF"
			},
			backgroundColor:{
				type:String,
				default: "#DC4F3F"
			},
			title:{
				type:String,
				default: "提交"
			}
		},
		methods: {
			submit() {
				this.$emit('click');
			}
		}
	}
</script>

<style>
	.bottom-box {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 200rpx;
		left: 0;
		right: 0;
	}

	.bottom {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 670rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin: 16rpx auto;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
	}
</style>
